<template>
<div class="wrap">
<xcl-header :show="loading.show" :call-back="callBack" :page-title="pageTitle" :header-right="headerRight"></xcl-header>
<xcl-footer :show="loading.show" :show-txt="loading.showTxt"></xcl-footer>
<!--产品列表-->
<div class="content" id="content1" transition="fade" v-show="screen">
	<xcl-tab :tab-titles="tabTitles" :click-fn="tabClickFn"></xcl-tab>
	<div v-if="topics.length === 0  && loading.show === false" >
      <div class="no-data">暂无数据</div>
    </div>
	<div class="list-block" style="margin:0" v-else>
		<ul>
			<li v-for="i in topics">
				<div class="row" style="padding:0.5rem;border-bottom:1px solid #ccc">
					<div class="col-85" v-link="{name:'ProductDetail',params:{SId:i.sid}}">
						<div class="row">
							<div class="col-50">{{i.n}}</div>
							<div class="col-50" style="text-align:right;color:red">{{{i.it1 | formatPercent}}}</div>
						</div>
						<div class="row" style="font-size:0.7rem;color:#666">
							<div class="col-50">{{i.tn}}</div>
							<div class="col-50" style="text-align: right;">{{i.n1 | formatNumber 4}}</div>
						</div>
					</div>
					<div class="col-15" style="font-size:1.5rem;text-align:center" @click="addFollow(i.id,i.sid)">
						<span :class="['icon',myFollow.join(',').indexOf(i.sid)>-1 ? 'icon-icstar2 follow':'icon-icstar1','icon-size']"></span>
					</div>
				</div>				
			</li>
		</ul>
		<div class="no-data-load" v-if="nodata">没有更多的数据了...</div>
	</div>
</div>
<!--筛选-->
<div class="content screen" v-else>
	<div class="card-title">产品类型</div>
	<div class="card" style="margin:0">
	    <div class="card-content">
	      	<div class="card-content-inner">
      			<div class="row">
      				<div class="col-25 screen-item" :class="{'active-item':t.active}" v-for="t in productType" @click="typeClickFn(t.type)">{{t.title}}</div>
	      		</div>
	    	</div>
		</div>
	</div>
	<div class="card-title">产品状态</div>
	<div class="card" style="margin:0">
	    <div class="card-content">
	      	<div class="card-content-inner">
      			<div class="row">
      				<div class="col-25 screen-item" :class="{'active-item':s.active}" v-for="s in productStatus" @click="statusClickFn(s.status)">{{s.title}}</div>
      			</div>
	      	</div>
	    </div>
	</div>
	<div class="card-title">购买状态</div>
	<div class="card" style="margin-top:0">
	    <div class="card-content">
	      	<div class="card-content-inner">
      			<div class="row">
      				<div class="col-25 screen-item" :class="{'active-item':b.active}" v-for="b in buyStatus" @click="buyClickFn(b.status)">{{b.title}}</div>
      			</div>
	      	</div>
	    </div>
	</div>
	
</div>
<xcl-loading :show="loading.show" :show-txt="loading.showTxt"></xcl-loading> 
</div>
</template>
<script>
  import xclHeader from '../components/header.vue'
  import xclFooter from '../components/footer.vue'
  import xclLoading from '../components/loading.vue'
  import xclTab from '../components/tab.vue'
  let ProductProxy =  require("../proxy/product_proxy");
  let MyFollowProxy = require("../proxy/my_follow_proxy");
  let product = new ProductProxy();
  let MyFollow = new MyFollowProxy();
  export default {
        data (){
            return {
                scroll:true,
                screen:true,
                pageTitle:'发现',
                headerRight:'筛选',
                orderBy:'_incomeTotal',
                nodata:false,
                login:true,
                topics:[],
                myFollow:[],
                productRunning:{},
                callBack:()=>{
                	if(this.screen){
                		this.screen=false;
                		this.pageTitle='筛选';
                		this.headerRight='完成';
                		
                	}else{
                		this.screen=true;
                		this.pageTitle='发现';
                		this.headerRight='筛选';
                		this.searchKey.page=1;
                		this.topics=[];
            			this.getTopics();
                	}               	                	
                },
                defaultValue:{
                	type:-1,
                	status:-1,
                	isCanBuy:-1
                	
                },
                productType:[
                	{title:'不限',type:-1,active:true},
                	{title:'股票型',type:1,active:false},
                	{title:'债劵型',type:2,active:false},
                	{title:'管理期货',type:3,active:false},
                	{title:'量化对冲',type:4,active:false},
                	{title:'宏观对冲',type:5,active:false},
                	{title:'组合基金',type:6,active:false},
                	{title:'时间驱动',type:7,active:false},
                	{title:'海外基金',type:8,active:false},
                	{title:'复合策略',type:9,active:false}
                ],
//              productYear:[
//              	{title:'不限',year:-1,active:true},
//              	{title:'2015',year:2015,active:false},
//              	{title:'2014',year:2014,active:false},
//              	{title:'2013',year:2013,active:false},
//              	{title:'2012',year:2012,active:false},
//              	{title:'2011',year:2011,active:false},
//              	{title:'2010',year:2010,active:false},
//              	{title:'2009',year:2009,active:false}
//              ],
                productStatus:[
                	{title:'不限',status:-1,active:true},
                	{title:'募集期',status:4,active:false},
                	{title:'封闭期',status:5,active:false},
                	{title:'运行期',status:6,active:false},
                	{title:'已结束',status:7,active:false},
                ],
                buyStatus:[
                	{title:'不限',status:-1,active:true},
                	{title:'开放购买',status:1,active:false},
                	{title:'关闭购买',status:0,active:false},
                ],
                tabTitles:[
                    {title:'月排行',order:'_incomeMonth',active:false},
                    {title:'季排行',order:'_incomeQuarter',active:false},
                    {title:'年排行',order:'_incomeYear',active:false},
                    {title:'成立以来',order:'_incomeTotal',active:true},
                ],
                searchKey:{
                    page:1,
                    limit:10,
                    tab:'all',
                    mdrender:true
                },
                 loading:{
                    show:false
                }
            }
        },
        route:{        	
            deactivate (transition){
                $('#content1').off('scroll');
                transition.next();
            }
        },
        ready (){
           //页面初次加载获取的数据
            this.getTopics();                        
            $('#content1').on('scroll', () => {
              this.getScrollData();
            });           			
        },        
        methods:{
        	//获取产品列表
            getTopics (){
                var _this=this;
                _this.loading.show = true;
                product.queryProducts(this.defaultValue.type,0,4.8e12,0,this.defaultValue.status,-1,'',_this.orderBy,false,this.defaultValue.isCanBuy,this.searchKey.page,this.searchKey.limit,1,function(d){
                    if(d.code == 200 && d.results && d.results.length){
                      _this.scroll = true;
                      _this.topics = _this.topics.concat(d.results);                      
                      if(localStorage.token){
		            	_this.getMyFollow();		            	
		              }
                      
                    }else{
                      _this.nodata = true;
                    }
                    _this.loading.show = false;
                });
            },
            //获取收藏产品
            getMyFollow(){
            	var _this=this;
            	MyFollow.queryMyFollows(localStorage.token,2,2,1,999,function(data){
            		if(data.code == 200 && data.results && data.results.length){
            			for(var i=0;i<data.results.length;i++){
            				_this.myFollow.push(data.results[i].sid);
            			}
            		}
            	});
            	
            },
            //滚动加载数据
            getScrollData (){
                if(this.scroll){
                    let $content=$('#content1');
                    if ($content.height() + $content[0].scrollTop >= $content[0].scrollHeight - 10) {
                        this.scroll = false;
                        this.searchKey.page++;
                        this.getTopics();
                    }
                }
            },
            //收藏产品
            addFollow (rid,psid){
            	var _this=this;
            	var token=localStorage.token;
            	if(!token){
            		_this.$router.go('/Login'); 
            	}else if(_this.myFollow.join().indexOf(psid)==-1){
            		MyFollow.addMyFollow(token,rid,2,'',function(data){
            			if(data.code==200&&data.results){
            				_this.myFollow.push(psid);
            			}else if(data.code==4090){
            				_this.$router.go('/Login');
            			}
            		});
            	}
            },
            //排序
            tabClickFn(order){
            	var _this=this;
                this.tabTitles.forEach((item,index)=>{
                    order===item.order ? item.active = true : item.active = false;
                });
                this.orderBy = order;
                this.searchKey.page=1;
            	this.topics=[];
            	this.getTopics();
            },
            //筛选
            typeClickFn(type){
            	var _this=this;
            	this.productType.forEach((item,index)=>{
                    type===item.type ? item.active = true : item.active = false;
                });
                this.defaultValue.type = type;
            },
            statusClickFn(status){
            	var _this=this;
            	this.productStatus.forEach((item,index)=>{
                    status===item.status ? item.active = true : item.active = false;
                });
                _this.defaultValue.status = status;
            },
            buyClickFn(status){
            	var _this=this;
            	this.buyStatus.forEach((item,index)=>{
                    status===item.status ? item.active = true : item.active = false;
                });
                _this.defaultValue.isCanBuy = status;
            },
        },
        components:{
           "xclHeader":xclHeader,
           "xclFooter":xclFooter,
           "xclLoading":xclLoading,
           "xclTab":xclTab
        }
  }
</script>
<style lang="stylus">
.intro p
  text-indent 2em
.card-title{
	padding:0.3rem 0.5rem;
	font-size:0.75rem;
}
.screen-item{
	background:#f2f2f2;
    color: #111;
    text-decoration: none;
    text-align: center;
    display: block;
    border-radius: .25rem;
    line-height: 1.8rem;
    box-sizing: border-box;   
    padding: 0 .5rem;
    margin: 0 0 0.5rem 0;
    height: 1.8rem;
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    font-size: .7rem;
    font-family: inherit;
    cursor: pointer;
}
.active-item{
	color:#fff;
	background-color:#e76364 !important;
}
.follow{
	color:#F00;
}
.no-data-load
  padding:0.3rem 0 0.5rem
  font-size:0.75rem
  text-align:center  
  color:#ccc  
</style>
